<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highcharts动态曲线</title>
    <!-- 引入Highcharts -->
    <script src="highcharts.js"></script>
    <style>
        body {
            background: #0f172a;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
        }
        
        #container {
            width: 800px;
            height: 500px;
            background: #1e293b;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <script>
        // 初始化配置
        Highcharts.setOptions({
            lang: {
                numericSymbols: null // 移除千分位符号
            }
        });

        // 创建图表
        const chart = Highcharts.chart('container', {
            chart: {
                type: 'spline',
                backgroundColor: 'transparent',
                margin: [30, 25, 50, 60],
                animation: {
                    duration: 300,
                    easing: 'easeOutQuad'
                }
            },
            title: {
                text: '实时数据流',
                style: {
                    color: '#f8fafc',
                    fontSize: '20px',
                    fontWeight: 500
                }
            },
            xAxis: {
                type: 'datetime',
                tickInterval: 500, // 0.5秒刻度
                labels: {
                    style: { color: '#94a3b8' },
                    formatter: function() {
                        return Highcharts.dateFormat('%H:%M:%S', this.value);
                    }
                },
                gridLineColor: '#334155',
                lineColor: '#334155'
            },
            yAxis: {
                title: { text: null },
                labels: { style: { color: '#94a3b8' } },
                gridLineColor: '#334155',
                min: 0,
                max: 100
            },
            series: [{
                name: '数据值',
                color: {
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [
                        [0, '#818cf8'], // 渐变起始色
                        [1, '#4f46e5']  // 渐变结束色
                    ]
                },
                lineWidth: 2,
                marker: { enabled: false },
                fillOpacity: 0.1,
                data: []
            }],
            plotOptions: {
                series: {
                    marker: { radius: 3 },
                    states: { hover: { lineWidthPlus: 0 } }
                }
            },
            tooltip: {
                backgroundColor: 'rgba(30,41,59,0.95)',
                borderColor: '#475569',
                style: { color: '#f8fafc' },
                formatter: function() {
                    return `<b>${Highcharts.dateFormat('%H:%M:%S', this.x)}</b><br/>
                            ${this.series.name}: ${this.y.toFixed(2)}`;
                }
            },
            credits: { enabled: false },
            legend: { enabled: false }
        });

        // 初始化数据
        let dataPoints = [];
        let currentTime = Date.now();

        // 定时更新数据
        setInterval(() => {
            currentTime += 500; // 时间递增0.5秒
            const newValue = Math.random() * 100;
            
            // 维护数据队列（保留最近20个点）
            if (dataPoints.length >= 20) {
                dataPoints.shift();
            }
            dataPoints.push([currentTime, newValue]);

            // 更新图表
            chart.series[0].setData(dataPoints);
            
            // 自动滚动时间轴
            chart.xAxis[0].setExtremes(
                currentTime - 9500, // 显示最近9.5秒数据（20*0.5 - 0.5）
                currentTime + 500
            );
        }, 500);
    </script>
</body>
</html>